<template>
  <div class="home">
    <gltitle :is_mt="true" :is_notice="false" :is_back="true" :is_name="true" :title="title" :is_right="true" :titleRight="titleRight" @preserve="path_url('/financial/record?id=' + id)"></gltitle>
    <div class="container">
      <ul class="info">
          <li class="flex">
              <div class="flex1" v-if="id == 1">{{ $t('page4.doc75') }}</div>
              <div class="flex1" v-if="id == 2">{{ $t('page4.doc74') }}</div>
              <div class="str">{{ info.orderAmount }}</div>
          </li>
          <li class="flex">
              <div class="flex1">{{ $t('page4.doc85') }}</div>
              <div class="str">{{info.totalIncome}}</div>
          </li>
          <li class="flex" v-if="id == 1">
              <div class="flex1">{{ $t('page4.doc86') }}</div>
              <div class="str">{{info.todayIncome}}</div>
          </li>
      </ul>

        <ul class="list">
            <li v-for="(item,k) in list" :key="k">
                <div class="flex" @click="path_url('/financial/buy?pid=' + item.productId + '&id=' + id)">
                    <div class="pic"><img v-lazy="item.img" alt=""></div>
                    <div class="flex1">
                        <p v-if="id == 1"><span>{{ $t('page4.doc75') }}：</span>{{ item.min }} - {{item.max}}U</p>
                        <p v-if="id == 2"><span>{{ $t('page4.doc74') }}：</span>{{ item.min }} - {{item.max}}U</p>
                        <p><span>{{ $t('page4.doc76') }}：</span>{{item.days}} {{ $t('page.doc105') }}</p>
                        <p v-if="id == 1"><span>{{ $t('page4.doc77') }}：</span>{{ item.rate * 100 }}%</p>
                        <button v-if="id == 1">{{ $t('page4.doc81') }}</button>
                        <p v-if="id == 2"><span>{{ $t('page4.doc78') }}：</span>{{ item.viewIncomeRate }}%</p>
                        <p v-if="id == 2"><span>{{ $t('page4.doc87') }}：</span>{{item.buyCount}} / <i>{{ item.targetCount }}</i></p>
                        <p v-if="id == 2"><span>{{ $t('page4.doc88') }}：</span>
                            <var v-if="item.targetCount != 0">{{100 - (item.buyCount / item.targetCount) * 100}} %</var>
                            <var v-else>100%</var>
                        </p>
                    </div>
                </div>
                <div class="srcoll" v-if="id == 2 && item.targetCount != 0">
                    <span :style="{width: + (item.buyCount / item.targetCount) * 100 + '%'}"></span>
                </div>

            </li>

        </ul>
    </div>
  </div>
</template>

<script>
import {mapMutations} from 'vuex'

export default {

  data() {
    return {
      title:this.$t('page4.doc68'),
        titleRight: "<img src=" + require("../../assets/images/ico1.png") + ">",
      id:this.$route.query.id,
        info:[],
        list:[]


    };
  },
  created() {

  },
  mounted() {
      if(this.id == 1){
          this.title = this.$t('page4.doc68')
          document.title = this.$t('page4.doc68')
      }else{
          this.title = this.$t('page4.doc71')
          document.title = this.$t('page4.doc71')
      }
    this.getinfo()
      this.getList()
  },
  methods: {


    getinfo(){
        let url = ''
        if(this.id == 1){
            url = this.URL.financial.view
        }else{
            url = this.URL.invest.view
        }
      this.$post(url, {
      }).then((res) => {
        if (res.code == 0) {
            this.info = res.data
        } else {
          this.$toast(res.message);
        }
      });
    },

    getList(){
        let url = ''
        if(this.id == 1){
            url = this.URL.financial.list
        }else{
            url = this.URL.invest.list
        }
        this.$post(url, {
        }).then((res) => {
            if (res.code == 0) {
                this.list = res.data
            } else {
                this.$toast(res.message);
            }
        });
    },




    path_url(url){
      this.$router.push({
        path:url,
        query:{
        }
      });
    },
  },
};
</script>


<style lang="less" scoped>
.info {
  margin-top: .28rem;
  border-radius: .2rem;
  background: #1A202E;
  padding:.2rem .32rem;
  li {
    padding:.12rem 0;
  }
  .flex1 {
    color: rgba(255, 255, 255, 0.50);
  }
}

.list {
  padding-top: .08rem;
  li {
    border-radius: .2rem;
    background: #1A202E;
    padding:.32rem;
    margin-top: .64rem;
    font-size: .24rem;

    p {
      padding-bottom: .12rem;
      i {
        color: #076FFD;
      }
    }
    span {
      color: rgba(255, 255, 255, 0.50);

    }
    button {
      margin-top: .16rem;
      border-radius: .12rem;
      background: linear-gradient(90deg, #7B02FE 0%, #0570FD 100%);
      height: .48rem;
      padding: 0 .4rem;
      font-size: .24rem;
      color: #fff;
      border:0;
    }
    .pic {
      width: 1.76rem;
      margin-top: -.68rem;
      margin-right: .32rem;
      img {
        width: 100%;
      }
    }
  }
}

.srcoll {
  border-radius: .16rem;height: .16rem;
  background: #262E41;
  margin-top: .26rem;
  span {
    display: block;height: .16rem;
    border-radius: .16rem;
    background: #0A78F1;
  }
}
</style>